<!--<!DOCTYPE html>-->
<!--<html lang="zh-CN">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>花卉识别</title>-->
<!--    <style>-->
<!--        body {-->
<!--            font-family: '楷体', sans-serif;-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            background-color: #f0f0f0;-->
<!--        }-->
<!--        .container {-->
<!--            max-width: 800px;-->
<!--            margin: 0 auto;-->
<!--            padding: 20px;-->
<!--        }-->
<!--        .header {-->
<!--            text-align: center;-->
<!--            margin-bottom: 30px;-->
<!--        }-->
<!--        .header h1 {-->
<!--            color: #333;-->
<!--        }-->
<!--        .upload-section {-->
<!--            text-align: center;-->
<!--            margin-bottom: 20px;-->
<!--        }-->
<!--        .result-section {-->
<!--            text-align: center;-->
<!--            padding: 20px;-->
<!--            background-color: #f9f9f9;-->
<!--            border-radius: 5px;-->
<!--            margin-bottom: 20px;-->
<!--        }-->
<!--        .grad-cam {-->
<!--            max-width: 100%;-->
<!--            height: auto;-->
<!--            margin-top: 20px;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--    <div class="container">-->
<!--        <div class="header">-->
<!--            <h1>花卉识别</h1>-->
<!--        </div>-->
<!--        <div class="upload-section">-->
<!--            <input type="file" id="fileUpload" accept="image/*">-->
<!--            <button onclick="uploadImage()">识别花卉</button>-->
<!--        </div>-->
<!--        <div class="result-section" id="resultSection" style="display: none;">-->
<!--            <h2 id="resultTitle">识别结果</h2>-->
<!--            <p id="resultClass"></p>-->
<!--            <p id="resultConfidence"></p>-->
<!--            <img id="gradCam" class="grad-cam">-->
<!--        </div>-->
<!--    </div>-->

<!--    <script>-->
<!--        function uploadImage() {-->
<!--            const fileInput = document.getElementById('fileUpload');-->
<!--            const file = fileInput.files[0];-->
<!--            if (!file) {-->
<!--                alert('请选择图片');-->
<!--                return;-->
<!--            }-->

<!--            const formData = new FormData();-->
<!--            formData.append('file', file);-->

<!--            fetch('/predict', {-->
<!--                method: 'POST',-->
<!--                body: formData-->
<!--            })-->
<!--            .then(response => response.json())-->
<!--            .then(data => {-->
<!--                document.getElementById('resultSection').style.display = 'block';-->
<!--                document.getElementById('resultClass').textContent = `类别: ${data.class}`;-->
<!--                document.getElementById('resultConfidence').textContent = `置信度: ${(data.confidence * 100).toFixed(2)}%`;-->
<!--                document.getElementById('gradCam').src = data.grad_cam;-->
<!--            })-->
<!--            .catch(error => {-->
<!--                console.error('Error:', error);-->
<!--                alert('识别失败');-->
<!--            });-->
<!--        }-->
<!--    </script>-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>🌸 花卉识别系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            list-style: none;
            text-decoration: none;
        }

        body {
            background: linear-gradient(135deg, #eef3f6, #f5f7fa);
            line-height: 1.6;
            color: #333;
        }

        .container {
            max-width: 1000px;
            margin: 30px auto;
            padding: 30px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            animation: fadeInUp 0.8s ease-out;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        .header h1 {
            font-size: 2.8rem;
            color: #2c3e50;
            margin-bottom: 10px;
            position: relative;
            display: inline-block;
        }

        .header h1::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -8px;
            width: 60px;
            height: 3px;
            background: #3498db;
            transform: translateX(-50%);
        }

        .header p {
            color: #7f8c8d;
            font-size: 1.1rem;
        }

        .upload-section {
            border: 2px dashed #3498db;
            border-radius: 10px;
            padding: 40px 20px;
            text-align: center;
            margin-bottom: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .upload-section:hover {
            background: #f8f9fa;
            border-color: #2980b9;
        }

        .file-input {
            display: none;
        }

        .upload-btn {
            font-size: 1.2rem;
            color: #3498db;
            margin-top: 15px;
            display: inline-block;
            padding: 10px 30px;
            border: 2px solid #3498db;
            border-radius: 25px;
            transition: all 0.3s ease;
        }

        .upload-btn:hover {
            background: #3498db;
            color: white;
        }

        .result-section {
            display: none;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            animation: slideInUp 0.5s ease-out;
        }

        .result-title {
            font-size: 2rem;
            color: #2c3e50;
            margin-bottom: 20px;
            position: relative;
        }

        .result-title::before {
            content: "🌸";
            margin-right: 10px;
            color: #2ecc71;
        }

        .result-item {
            font-size: 1.2rem;
            margin-bottom: 10px;
        }

        .result-item strong {
            color: #34495e;
            font-weight: 500;
        }

        .grad-cam-container {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
        }

        .grad-cam {
            max-width: 600px;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .grad-cam:hover {
            transform: scale(1.02);
        }

        /* 动画定义 */
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideInUp {
            0% {
                opacity: 0;
                transform: translateY(10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>花卉识别系统</h1>
            <p>上传一张花卉照片，即可快速识别种类</p>
        </div>

        <div class="upload-section" onclick="document.getElementById('fileUpload').click()">
            <input type="file" id="fileUpload" class="file-input" accept="image/*">
            <i class="fas fa-cloud-upload-alt" style="font-size: 48px; color: #3498db; margin-bottom: 15px;"></i>
            <div class="upload-btn">
                点击上传图片
            </div>
            <p style="color: #7f8c8d; font-size: 0.9rem; margin-top: 10px;">支持JPG/PNG等常见图片格式</p>
        </div>

        <div class="result-section" id="resultSection">
            <h2 class="result-title" id="resultTitle"></h2>
            <div class="result-item">
                <strong>识别类别:</strong> <span id="resultClass"></span>
            </div>
            <div class="result-item">
                <strong>置信度:</strong> <span id="resultConfidence"></span>
            </div>
            <div class="grad-cam-container">
                <h3 style="font-size: 1.3rem; color: #34495e; margin-bottom: 15px;">关键特征热力图</h3>
                <img id="gradCam" class="grad-cam" src="" alt="Grad-CAM可视化">
            </div>
        </div>
    </div>

    <script>
        function uploadImage() {
            const fileInput = document.getElementById('fileUpload');
            const file = fileInput.files[0];
            if (!file) {
                showToast('请选择图片文件', 'error');
                return;
            }

            const formData = new FormData();
            formData.append('file', file);

            // 显示加载状态
            const resultSection = document.getElementById('resultSection');
            resultSection.style.display = 'block';
            resultSection.innerHTML = `
                <div style="text-align: center; padding: 20px;">
                    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem; margin: 0 auto;"></div>
                    <p>正在识别中，请稍候...</p>
                </div>
            `;

            fetch('/predict', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) throw new Error('识别请求失败');
                return response.json();
            })
            .then(data => {
                if (data.error) throw new Error(data.error);

                document.getElementById('resultTitle').textContent = `识别结果 ${data.class ? '🌸' : ''}`;
                document.getElementById('resultClass').textContent = data.class || '未知类别';
                document.getElementById('resultConfidence').textContent =
                    data.confidence ? `${(data.confidence * 100).toFixed(2)}%` : '无法获取置信度';
                document.getElementById('gradCam').src = data.grad_cam || '';

                // 显示结果动画
                resultSection.style.opacity = 0;
                resultSection.style.transform = 'translateY(10px)';
                setTimeout(() => {
                    resultSection.style.opacity = 1;
                    resultSection.style.transform = 'translateY(0)';
                }, 50);
            })
            .catch(error => {
                console.error('Error:', error);
                resultSection.innerHTML = `
                    <h2 class="result-title">识别失败 ❌</h2>
                    <p>请检查图片格式或重新尝试</p>
                `;
                showToast('识别失败，请重试', 'error');
            });
        }

        // 消息提示Toast
        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            toast.textContent = message;
            toast.style.position = 'fixed';
            toast.style.top = '20px';
            toast.style.right = '20px';
            toast.style.padding = '10px 20px';
            toast.style.borderRadius = '25px';
            toast.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
            toast.style.opacity = 0;
            toast.style.transform = 'translateX(20px)';
            toast.style.transition = 'all 0.3s ease';

            if (type === 'error') {
                toast.style.backgroundColor = '#e74c3c';
                toast.style.color = 'white';
            } else {
                toast.style.backgroundColor = '#3498db';
                toast.style.color = 'white';
            }

            document.body.appendChild(toast);
            setTimeout(() => {
                toast.style.opacity = 1;
                toast.style.transform = 'translateX(0)';
            }, 10);

            setTimeout(() => {
                toast.style.opacity = 0;
                toast.style.transform = 'translateX(20px)';
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }

        // 兼容旧版浏览器的FileReader预览
        document.getElementById('fileUpload').addEventListener('change', function(e) {
            const reader = new FileReader();
            reader.onload = function(e) {
                // 这里可以添加图片预览功能
            };
            reader.readAsDataURL(e.target.files[0]);
        });
    </script>

    <!-- 字体图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
</body>
</html>